<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .mybox { width:600px}
        .myh1{margin:50px 0;text-align: center;}
    </style>
</head>
<body>
<form class="layui-form">
<div class="layui-container">
    <h1 class="myh1">作业完成情况</h1>


    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-block">
                    <select id="ban" name="interest" lay-filter="ban">

                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">学生</label>
                <div class="layui-input-block">
                    <select  id="xue" name="interest" lay-filter="xue">

                    </select>
                </div>
            </div>
        </div>
    </div>
<!--班级<select onchange="getstu()" id="ban2"></select>-->
<!--学生<select id="xue2"></select>-->
<!--<p><input id="sj" type="date"></p>-->
    <div class="layui-form-item">
        <label class="layui-form-label">日期选择</label>
        <div class="layui-input-block">
            <input id="sj" type="date" placeholder="请输入"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">原因</label>
        <div class="layui-input-block">
            <input id="yy" type="text" name="" placeholder="请输入"  class="layui-input">
        </div>
    </div>

    <!--<p>原因<input id="yy" type="text"></p>-->
    <div class="layui-form-item" style="text-align: center;">
    <button onclick="tj()" type="button" class="layui-btn">记录</button>
    <a id="mya" onclick="cha()" href="#" class="layui-btn" target="_blank">查看本月情况</a>
</div>
<!--<p><button onclick="tj()">记录</button></p>-->
<!--<a id="mya" onclick="cha()" href="#" target="_blank">查看本月情况</a>-->
</div>
</form>
</body>
<script src="JS/jquery-1.11.1.min.js"></script>
<script>
    //jq  onload()事件
    $(function (){
        var url="homework/ban";
        $.get(url).done(function (data){
            console.log(data);
            $("#ban").append("<option>请选择一个班</option>")
            //增加到班级列表里
            for ( var i=0;i<data.length;i++){
                var op=new Option(data[i].classname,data[i].classid);
                $("#ban").append(op);
            }
            renderForm();//表单重新渲染
            // for(i=0;i<data.length;i++){
            //   var op=new Option(data[i].className,data[i].classId);
            //   $("#ban").append(op);
            // }

        });
    });
    function getstu(){
        var cid=$("#ban").val();
        var url="http://localhost:8080/taobao/homework/xue?cid="+cid;
        $.get(url).done(function (data) {
            console.log(data);
            $("#xue").empty();
            for (var i=0;i<data.length;i++){
                var op=new Option(data[i].name,data[i].stuid);
                $("#xue").append(op);
            }
            renderForm();//表单重新渲染
        });
    }
    function tj(){
        var cid=$("#ban").val();
        alert("班级是"+cid);
        var name=$("#xue").val();
        alert(name);
        var sj=$("#sj").val();
        // sj.toLocaleString();
        // alert(sj);5
        var yy=$("#yy").val();
        var url="http://localhost:8080/taobao/homework/tj?cid="+cid+"&name="+name+"&sj="+sj+"&yy="+yy;
        $.get(url).done(function (data) {
            if(data==true){
                alert("增加成功");
                layer.msg("添加成功");
            }else{
                -alert("增加失败*");
                layer.msg("添加失败");
            }
        });
    }
    function cha(){
        var ban=$("#ban").val();
        var rq=$("#sj").val();
        $("#mya").attr("href","homework/serch?cid="+ban+"&riqi="+rq);
    }
    function renderForm(){
        layui.use('form', function(){
            var form = layui.form;

            form.render();
        });
    }
</script>
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer', 'form'],function() {
        var layer = layui.layer
            , form = layui.form
            , laypage = layui.laypage
            , element = layui.element
            , laydate = layui.laydate
            , util = layui.util;

        form.on('select(ban)', function (data) {
            getstu();
        });
    });
</script>
</html>